<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getMessageItemVoListApi">
      <template #tableHeader="scope">
        <el-button type="danger" :icon="Delete" :disabled="!scope.isSelected" @click="handleBatchDelted(scope.selectedListIds)">
          批量删除消息
        </el-button>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status === sysEnum.ONE ? '' : 'info'" style="margin-left: 5px">
          {{ filterEnum(scope.row.status, msgStatusType) }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="View" size="small" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          查看
        </el-button>
        <el-button type="danger" :icon="Delete" size="small" text @click="handleDeleteMessageItem(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <MessageItemDialog ref="dialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import MessageItemDialog from "./components/MessageItemDialog.vue";
import { Delete, View } from "@element-plus/icons-vue";
import { getMessageItemVoListApi, deleteMessageItemApi, deleteMessagesApi } from "@/api/modules/cpymsg/sys";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { msgStatusType } from "@/biz/datas/appData";
import { MessageItemVo } from "@/biz/interface/MessageType";
const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  {
    prop: "title",
    label: "标题",
    search: { el: "input" },
    width: 200
  },
  {
    prop: "content",
    label: "内容"
  },
  {
    prop: "status",
    label: "消息状态",
    width: 160,
    enum: msgStatusType,
    search: { el: "select" }
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 160
  },
  {
    prop: "openDate",
    label: "查看时间",
    width: 160
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

const handleBatchDelted = async (msgIds: string[]) => {
  await useHandleData(deleteMessagesApi, { msgIds }, "批量删除所选系统信息");
  pTable.value.getTableList();
};

// 删除信息
const handleDeleteMessageItem = async (params: MessageItemVo) => {
  await useHandleData(deleteMessageItemApi, { id: params.id! }, `删除【${params.title}】消息明细表`);
  pTable.value.getTableList();
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};
</script>
